<!DOCTYPE html>
<html>
<head>
<title>Hoder Test</title>  
<style>
	#sample {background:url(?holder.js/100x40/test/auto);width:300px;height:80px;display:block;}
</style> 
<script src="holder.js"></script>
</head>
<body>
<div id="example">
	<h3>How do I use it?</h3>
	<p>
		<img src="holder.js/240x40">
	</p>
	<p>
		<img src="holder.js/500x40/industrial">
	</p>
	<p> 
		<img data-src="example.com/100x40/simple" id="new">
		<script> 
			Holder.run({
			domain: "example.com",
			themes: {
				"simple":{
					background:"#ff0",
					foreground:"#000",
					size:12
					}
			},
			images: "#new"
			});
		</script>
	</p> 
	<div id="sample" class="holderjs">
	</div> 
	<script>  
		Holder.add_theme("test", { background: "#777", foreground: "#000", text:"test bg", size: 18 });
	</script>
	<p>
		<img data-src="holder.js/340x40/bright">
		<script> 
			Holder.add_theme("bright", { background: "red", foreground: "gray", size: 12 });
			//Holder.add_theme("bright", { background: "red", foreground: "gray", size: 12 }).run();
		</script>
	</p>
	<p><img data-src="holder.js/100x40/#000:#fff"></p>
	<p><img data-src="holder.js/200x40/text:hello world"></p>
	<p><img data-src="holder.js/50%x40/industrial"></p>
	<p><img data-src="holder.js/500x40/auto"></p>
</div>
<script> 
Holder.run(); //required
Holder.add_theme("new",{foreground:"#000", background:"#000", size:10, text:'no see'}).add_image("holder.js/200x10/new", "p").run();
</script>
</body>
</html>